<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>中佳沙发配色</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="icon" href="data:,">
    </head>
<body>
    <!-- 沙发选择界面 -->
    <div id="sofa-selection" class="page active">
        <h1>选择电竞沙发</h1>
        <div class="sofa-list">
            <!-- 沙发列表 -->
            <div class="sofa-item" data-index="0">
                <img src="thumbnails/sofa1.webp" alt="Sofa 1">
                <p>Sofa 1</p>
            </div>
            <div class="sofa-item" data-index="1">
                <img src="thumbnails/sofa2.webp" alt="Sofa 2">
                <p>Sofa 2</p>
            </div>
            <div class="sofa-item" data-index="2">
                <img src="thumbnails/sofa3.webp" alt="Sofa 3">
                <p>Sofa 3</p>
            </div>
            <div class="sofa-item" data-index="3">
                <img src="thumbnails/sofa4.webp" alt="Sofa 4">
                <p>Sofa 4</p>
            </div>
            <div class="sofa-item" data-index="4">
                <img src="thumbnails/sofa5.webp" alt="Sofa 5">
                <p>Sofa 5</p>
            </div>
            <div class="sofa-item" data-index="5">
                <img src="thumbnails/sofa6.webp" alt="Sofa 6">
                <p>Sofa 6</p>
            </div>
            <div class="sofa-item" data-index="6">
                <img src="thumbnails/sofa7.webp" alt="Sofa 7">
                <p>Sofa 7</p>
            </div>
            <div class="sofa-item" data-index="7">
                <img src="thumbnails/sofa8.webp" alt="Sofa 8">
                <p>Sofa 8</p>
            </div>
        </div>
    </div>

    <!-- 颜色选择界面 -->
    <div id="color-selection" class="page">
        <div id="back-button">← 返回</div>
        <div id="left-panel">
            <h2 id="sofa-name" class="sofa-name-center"></h2>
            <canvas id="canvas"></canvas>
        </div>
        <div id="right-panel">
            <div class="combined-section">
                <!-- 当前颜色显示 -->
                <div id="current-colors">
                    <h3>当前选择的颜色</h3>
                    <div class="color-display-container">
                        <div class="color-display">
                            <div id="current-main-color" class="color-option"></div>
                            <div id="current-main-color-name" class="color-name">主色</div>
                        </div>
                        <div class="color-display">
                            <div id="current-accent-color" class="color-option"></div>
                            <div id="current-accent-color-name" class="color-name">配色</div>
                        </div>
                        <div class="color-display">
                            <div id="current-accent1-color" class="color-option"></div>
                            <div id="current-accent1-color-name" class="color-name">配色1</div>
                        </div>
                    </div>
                </div>
        <!-- 拉手选择（移动到下方） -->
            <div class="handle-section">
                <h4>拉手选择</h4>
                <div class="handle-selector">
                    <div class="handle-option" data-handle="Golden">
                        <img src="thumbnails/golden-handle.webp" alt="Golden Handle">
                        <p>Golden</p>
                    </div>
                    <div class="handle-option" data-handle="Silver">
                        <img src="thumbnails/silver-handle.webp" alt="Silver Handle">
                        <p>Silver</p>
                    </div>
                </div>
                
            <h3>主色选择</h3>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('main-colors-248')">无溶剂248系列 ▼</h4>
                <div id="main-colors-248" class="color-scroll-container" style="display: none;"></div>
            </div>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('main-colors-s600')">无溶剂S600系列 ▼</h4>
                <div id="main-colors-s600" class="color-scroll-container" style="display: none;"></div>
            </div>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('main-colors-w00')">无溶剂W00系列 ▼</h4>
                <div id="main-colors-w00" class="color-scroll-container" style="display: none;"></div>
            </div>

            <h3>配色选择</h3>
            <div class="accent-selector">
                <div class="accent-button" onclick="selectAccent('accent')">accent</div>
                <div class="accent-button" onclick="selectAccent('accent1')">accent1</div>
            </div>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('accent-colors-p248')">P248系列 ▼</h4>
                <div id="accent-colors-p248" class="color-scroll-container" style="display: none;"></div>
            </div>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('accent-colors-ps600')">PS600系列 ▼</h4>
                <div id="accent-colors-ps600" class="color-scroll-container" style="display: none;"></div>
            </div>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('accent-colors-pw00')">PW00系列 ▼</h4>
                <div id="accent-colors-pw00" class="color-scroll-container" style="display: none;"></div>
            </div>
            <div class="color-series">
                <h4 class="series-header" onclick="toggleSeries('accent-colors-napa')">纳帕皮系列 ▼</h4>
                <div id="accent-colors-napa" class="color-scroll-container" style="display: none;"></div>
            </div>
            </div>
        </div>
    </div>

    <!-- 在index.html中，将现有的加载指示器替换为以下代码 -->
    <div id="loading-indicator" style="display: none;">
        <div class="loading-container">
            <div class="loading-text">加载中...</div>
            <div class="progress-container">
                <div id="progress-bar" class="progress-bar" data-progress="0%"></div>
            </div>
            <div id="progress-text" class="progress-text">0%</div>
        </div>
    </div>

<!-- 1. 核心库必须最先加载 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

<!-- 2. 其他依赖模块（顺序不重要，但必须在 three.min.js 之后） -->
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/libs/draco/gltf/draco_decoder.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/RGBELoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/pmrem/PMREMGenerator.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/lights/RectAreaLightUniformsLib.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/helpers/RectAreaLightHelper.js"></script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js" as="script">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/libs/draco/gltf/draco_decoder.js" as="script">

<!-- 3. 最后加载你的 main.js -->
<script src="main.js"></script>
</body>
</html>